<template>
  <div class="wrapper">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide bgone"
          :class="options.bannerindex == 0 ? 'active' : ''"
        >
          <div class="bg">
            <img
              src="@/assets/images/performance/performance_300000036.jpg"
              alt=""
            />
          </div>
          <div class="left">
            <img
              src="@/assets/images/performance/performance_300000043.png"
              alt=""
            />
          </div>
          <div class="right">
            <h3>F精神</h3>
            <p>由赛道传奇延续至平素驾驶控</p>
            <p>无论何时、何地，酣畅的架控快感从无休止</p>
          </div>
          <div class="san san1">
            <img
              src="@/assets/images/performance/performance_300000037.png"
              alt=""
            />
          </div>
          <div class="san san2">
            <img
              src="@/assets/images/performance/performance_300000038.png"
              alt=""
            />
          </div>
          <div class="san san3">
            <img
              src="@/assets/images/performance/performance_300000039.png"
              alt=""
            />
          </div>
          <div class="san san4">
            <img
              src="@/assets/images/performance/performance_300000040.png"
              alt=""
            />
          </div>
          <div class="san san5">
            <img
              src="@/assets/images/performance/performance_300000041.png"
              alt=""
            />
          </div>
        </div>
        <div
          class="swiper-slide bgtwo"
          :class="options.bannerindex == 1 ? 'active' : ''"
        >
          <div class="f">
            <img
              src="@/assets/images/performance/performance_100000050.png"
              alt=""
            />
          </div>
          <div class="sanjiao">
            <img
              src="@/assets/images/performance/performance_100000047.png"
              alt=""
            />
          </div>
          <div class="yuan1">
            <img
              src="@/assets/images/performance/performance_100000044.png"
              alt=""
            />
          </div>
          <div class="yuan2">
            <img
              src="@/assets/images/performance/performance_100000045.png"
              alt=""
            />
          </div>
          <div class="left">
            <img
              src="@/assets/images/performance/performance_100000071.jpg"
              alt=""
            />
          </div>
          <div class="txt">
            <h2>F制造</h2>
            <p>
              "F”的命名源自Fuji Speedway
              (富士赛道)，由雷克萨斯工程师矢口幸彦创立,
            </p>
            <p>
              专注于研发高性能产品车型。富士赛道，位于富士山顶正东方18公里处,
            </p>
            <p>
              单圈长度4.563公里，拥有多达16个弯道以及世界上最长的1.5公里主直道.
            </p>
            <p>雷壳萨斯所打造的“F”车型,诞生于此,并生生不息。</p>
          </div>
        </div>
        <div
          class="swiper-slide bgthree"
          :class="options.bannerindex == 2 ? 'active' : ''"
        >
          <div class="pic1">
            <img
              src="@/assets/images/performance/performance_100000078.jpg"
              alt=""
            />
          </div>
          <div class="pic2">
            <img
              src="@/assets/images/performance/performance_100000064.png"
              alt=""
            />
          </div>
          <div class="pic3">
            <img
              src="@/assets/images/performance/performance_100000065.png"
              alt=""
            />
          </div>
          <div class="pic4">
            <img
              src="@/assets/images/performance/performance_100000066.png"
              alt=""
            />
          </div>
          <div class="txt">
            <h1>征战赛场</h1>
            <p>
              2011年，试车手Akira lida驾驶LFA在纽博格林北环刷出了7:14.64的成绩，
            </p>
            <p>
              创下了量产车型使用非竞技轮胎的最快圈速。LFA曾打造了两台经过升级
            </p>
            <p>的LFA Code-x。并在2014赛季获得了SP8组别以及SP-Pro组别的第一。</p>
            <p>RC F也推出了专门用于赛事的RCF GT3概念赛车，用以征战各大赛事。</p>
            <p>在2015年的Super GT上.RCFGT3概念赛车首战告捷，在第一站中就</p>
            <p>成功取得了分站冠军的成绩。之后又投身于火热的派克峰登山赛中。</p>
          </div>
        </div>
        <div
          class="swiper-slide bgfour"
          :class="options.bannerindex == 3 ? 'active' : ''"
        >
          <div class="bigsanjiao">
            <img
              src="@/assets/images/performance/performance_100000067.png"
              alt=""
            />
          </div>
          <div class="pic">
            <img
              src="@/assets/images/performance/performance_100000079.jpg"
              alt=""
            />
          </div>
          <div class="txt">
            <p>
              富士山见证了雷克萨斯F品牌的诞生与发展。之于未来，F家族的宗旨只有一条，
            </p>
            <p>
              就是快乐造车并让消费者爱上它。匠人的精神也正是这样，发自肺腑的热爱，
            </p>
            <p>
              持之以恒的相伴。关于雷克萨斯F家族历史,不是一段惊为天人的传记，
            </p>
            <p>而是一曲娓尾道来的歌曲,记录着感动与梦想。</p>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import "../assets/swipe/css/swiper.min.css";
import Swiper from "../assets/swipe/js/swiper.min.js";
export default {
  name: "Performance",
  data() {
    return {
      options: {
        pagination: ".swiper-pagination",
        bannerindex: 0,
        direction: "vertical",
        slidesPerView: 1,
        paginationClickable: true,
        mousewheelControl: true,
        onSlideChangeEnd: function (swiper) {
          this.bannerindex = swiper.activeIndex
        },
      },
    };
  },
  mounted() {
    new Swiper(".swiper-container", this.options);
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  height: 877px;
}
.swiper-container {
  width: 100%;
  height: 877px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 0px;
}
.swiper-slide {
  width: 100%;
  height: 877px;
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
/deep/ .swiper-pagination-bullet-active {
  background-color: rgb(206, 24, 24);
}
/deep/ .swiper-pagination-bullet {
  background-color: rgb(192, 62, 62);
  width: 14px;
  height: 14px;
  transform: translateX(-30px);
}
.bgone {
  background: #000;
  .bg {
    position: absolute;
    bottom: 0;
    transform: translateY(200px);
    transition: all 1s;
    img {
      width: 1900px;
      animation-name: shan;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }
  }
  .left {
    position: absolute;
    left: 0;
    z-index: 1000;
    img {
      width: 1480px;
      transform: translateY(-1600px);
      transition: all 2s;
    }
  }
  .right {
    text-align: center;
    position: absolute;
    right: 350px;
    color: #fff;
    overflow: hidden;
    h3 {
      transform: translateY(-120px);
      transition: all 2s;
    }
    p {
      margin-top: 10px;
      font-size: 14px;
      transform: translateY(-120px);
      transition: all 2s;
    }
  }
  .san {
    position: absolute;
    top: -600px;
    img {
      animation-name: yidong;
      animation-duration: 3s;
      animation-iteration-count: infinite;
    }
  }
  .san1 {
    left: 0;
    img {
      animation-delay: 1s;
    }
  }
  .san2 {
    left: 700px;
    img {
      animation-delay: 3s;
    }
  }
  .san3 {
    left: 500px;
    img {
      animation-delay: 2s;
    }
  }
  .san4 {
    left: 1700px;
    img {
      animation-delay: 3s;
    }
  }
  .san5 {
    left: 900px;
    img {
      animation-delay: 4s;
    }
  }
}
.bgone.active .left img {
  transform: translateY(0px);
}
.bgone.active .bg {
  transform: translateY(0px);
}
.bgone.active .right h3 {
  transform: translateY(0px);
}
.bgone.active .right p {
  transform: translateY(0px);
}
.bgtwo {
  background-color: #000;
  position: relative;
  .f {
    position: absolute;
    left: 800px;
    top: 160px;
    z-index: 2000;
    transition: all 2s;
    transform: translateY(-600px);
  }
  .sanjiao {
    position: absolute;
    left: 700px;
    top: 360px;
    z-index: 1000;
    transition: all 2s;
    transform: translateY(1000px);
  }
  .left {
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.3s;
    transition-delay: 2s;
    transform: translateX(-1600px);
  }
  .yuan1 {
    position: absolute;
    left: 500px;
    top: -20px;
    z-index: 1000;
    transition: all 2s;
    transform: translateY(1000px);
  }
  .yuan2 {
    position: absolute;
    left: 500px;
    top: -20px;
    z-index: 1000;
    transition: all 2s;
    transform: translateY(1000px);
  }
  .txt {
    position: absolute;
    left: 655px;
    top: 470px;
    z-index: 1000;
    color: #fff;
    overflow: hidden;
    h2 {
      margin-bottom: 20px;
      transform: translateY(180px);
      transition: all 2s;
    }
    p {
      margin-top: 5px;
      transition: all 2s;
      transform: translateY(200px);
    }
  }
}
.bgtwo.active .f {
  transform: translateY(0px);
}
.bgtwo.active .sanjiao {
  transform: translateY(0px);
}
.bgtwo.active .left {
  transform: translateX(0px);
}
.bgtwo.active .yuan1 {
  transform: translateY(0px);
}
.bgtwo.active .yuan2 {
  transform: translateY(0px);
}
.bgtwo.active .txt h2 {
  transform: translateY(0px);
}
.bgtwo.active .txt p {
  transform: translateY(0px);
}
.bgthree {
  background-color: #000;
  position: relative;
  .pic1 {
    position: absolute;
    top: 0;
    left: 10px;
    img {
      height: 977px;
      transform: scale(0.2);
      transition: all 2s;
    }
  }
  .pic2 {
    position: absolute;
    top: 100px;
    right: 420px;
    z-index: 1000;
    transform: translateY(-800px);
    transition: all 2s;
  }
  .pic3 {
    position: absolute;
    top: 180px;
    right: 280px;
    z-index: 1000;
    transform: translateY(-900px);
    transition: all 2s;
  }
  .pic4 {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
    transform: translateY(-700px);
    transition: all 2s;
  }
  .txt {
    position: absolute;
    top: 150px;
    right: 500px;
    color: #fff;
    z-index: 2000;
    overflow: hidden;
    h1 {
      margin-bottom: 20px;
      transform: translateY(300px);
      transition: all 2s;
    }
    p {
      font-size: 13px;
      margin-top: 10px;
      transform: translateY(300px);
      transition: all 2s;
    }
  }
}
.bgthree.active .pic1 img {
  transform: scale(1);
}
.bgthree.active .pic2 {
  transform: translateY(0px);
}
.bgthree.active .pic3 {
  transform: translateY(0px);
}
.bgthree.active .pic4 {
  transform: translateY(0px);
}
.bgthree.active .txt h1 {
  transform: translateY(0px);
}
.bgthree.active .txt p {
  transform: translateY(0px);
}
.bgfour {
  background-color: #000;
  position: relative;
  .bigsanjiao {
    position: absolute;
    top: 0;
    left: 200px;
    z-index: 1000;
    transform: translateY(1200px);
    transition: all 1s;
  }
  .pic {
    position: absolute;
    top: 0;
    left: 10px;
    img {
      height: 977px;
    }
  }
  .txt {
    position: absolute;
    top: 200px;
    left: 700px;
    z-index: 1000;
    color: #fff;
    font-size: 13px;
    overflow: hidden;
    p {
      margin-top: 10px;
      transform: translateY(200px);
      transition: all 2s;
    }
  }
}
.bgfour.active .bigsanjiao {
  transform: translateY(0px);
}
.bgfour.active .txt p {
  transform: translateY(0px);
}
@keyframes shan {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
@keyframes yidong {
  0% {
    transform: translateY(-600px);
  }
  100% {
    transform: translateY(1577px);
  }
}
</style>